<template>
  <div class="video-card" @click="navigateToVideo(video.fvid)">
    <div class="video-card__cover">
      <img :src=" UrlUtil.getFullImgUrl(video.videoCover)" alt="https://tse4-mm.cn.bing.net/th/id/OIP-C.NcpXiQVgHBRPAI4O5-e_eAHaFU?rs=1&pid=ImgDetMain">
      <div class="video-card__info">
        <span class="play-count">
          <i class="iconfont icon-bofangshu"/>
          {{ formatCount(video.view_count) }}
        </span>
        <span class="danmu-count">
          <i class="iconfont icon-danmushu"/>
          0
        </span>
        <span class="duration">{{ video.duration || '00:00' }}</span> <!-- 如果没有提供时长，默认显示为 '00:00' -->
      </div>
    </div>
    <div class="video-card__content">
      <h3 class="title" :title="video.videoTitle">{{ video.videoTitle }}</h3>
      <div class="up-info">
        <span class="up-name">
          <i class="iconfont icon-UPzhu"/>
          用户ID: {{ video.user_id }} <!-- 显示用户ID -->
        </span>
        <span class="publish-time">{{ formatDate(video.upload_time) }}</span> <!-- 格式化上传时间 -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';
import UrlUtil from "@/utils/Url/Url.js";
import {useRouter} from "vue-router";

const router = useRouter();
defineProps({
  video: {
    type: Object,
    required: true,
  }
})
function navigateToVideo(videoId) {
  router.push({
    name: 'video',
    params: { fvid: videoId }
  })
}

function formatCount(count) {
  if (count >= 10000) {
    return (count / 10000).toFixed(1) + '万'
  }
  return count
}

function formatDate(dateString) {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}



</script>

<style lang="less" scoped>
.video-card {
  cursor: pointer;

  &:hover {
    .title {
      color: #00aeec;
    }

    .video-card__cover img {
      transform: scale(1.04);
    }
  }

  .video-card__cover {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    background-color: #f3f3f3;
    aspect-ratio: 16 / 9;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s;
    }

    .video-card__info {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 5px 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #fff;
      font-size: 12px;
      background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);

      .icon-placeholder {
        display: inline-block;
        width: 12px;
        height: 12px;
        margin-right: 4px;
        background-color: #fff;
        vertical-align: middle;
      }
    }
  }

  .video-card__content {
    padding: 8px 0;
    height: 62px;

    .title {
      margin: 0;
      font-size: 14px;
      font-weight: normal;
      line-height: 1.5;
      color: #18191c;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .up-info {
      margin-top: 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      color: #9499a0;

      .up-name {
        display: flex;
        align-items: center;

        .icon-placeholder {
          width: 12px;
          height: 12px;
          margin-right: 4px;
          background-color: #9499a0;
        }
      }
    }
  }
}
</style>
